import { Component, OnInit, Input, Output, EventEmitter, HostListener,ChangeDetectionStrategy } from '@angular/core';
import {itemAnim} from "../../anims/item.anim";

@Component({
  selector: 'app-task-item',
  templateUrl: './task-item.component.html',
  styleUrls: ['./task-item.component.scss'],
  animations:[itemAnim],
  changeDetection:ChangeDetectionStrategy.OnPush,
})
export class TaskItemComponent implements OnInit {

  @Input() item;
  @Input() avatar;
  @Output() taskClick = new EventEmitter<void>()
  // 动画初始值
  widerPrinrity = 'in'

  constructor() {}

  // 鼠标移入
  @HostListener('mouseenter')
  onMouseenter(){
    this.widerPrinrity = 'out';
  }
  // 鼠标移除
  @HostListener('mouseleave')
  onMouseleave(){
    this.widerPrinrity = 'in';
  }

  ngOnInit() {
    // 头像
    this.avatar = this.item.owner ? this.item.owner.avatar : 'unassigned'
  }
  // 点击列表
  onItemClick(){
    this.taskClick.emit();
  }
  // 点击单选
  onCheckboxClick(ev:Event){
    // 阻止冒泡
    ev.stopPropagation()
  }
}
